<%-- 
  - Author: Mohtisham Salahria
  - Date: 25-Mar-2011
  - Copyright Notice: TRAKHEES
  - Description: form.jsp
 --%>

<%@ include file="/WEB-INF/view/include.jsp"%>
<%@ page import="ae.pcfc.etks.online.web.*"%>

<c:if
	test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
	<script language="Javascript"
		src='<c:url value="/resources/js/ui/jquery.ui.datepicker-ar.js"/>'></script>
</c:if>


<script type="text/javascript">
	var $tabs ;
	
	function onCityChange(){
		
		var citySelVal = $("#strCity option:selected").val();
	    $("#hiddenCityVal").val(citySelVal);
	    var cityseltd = $("#strCity option:selected").text();
        document.getElementById('strCityDisplay').value = cityseltd ;
	}
	function del() 
	{		
		var row = $(this).parent().parent().prevAll().length;
		var confirmMsg = '<spring:message code="form.doc.delete.confirm" />';
		jConfirm(confirmMsg,'<spring:message code="label.button.delete" />',function(result){
			if(result){
				try{
					deleteFile(row);
					var tr = $("#docTable").find("tr").get(row); 
					$(tr).remove();
				}catch(e){}
			}	
		});
		return false;
	}
	function deleteFile(row) 
	{		
		$("input:hidden[name^='arrDocumentVOs["+row+"]']").remove();
		resetArrDocs(row);
	}
	function resetArrDocs(index){
		try{
			for(var nextIndex=parseInt(index)+1;nextIndex<2;nextIndex++){
				var nextElmts = $("input:hidden[name^='arrDocumentVOs["+ nextIndex + "]']");
				if(nextElmts == null ||nextElmts.length == 0){
					return;
				}else{
					for(var elmtIdx=0;elmtIdx<nextElmts.length;elmtIdx++){
						var elmt = nextElmts[elmtIdx];
						var elmtName = $(elmt).attr('name');
						elmtName = elmtName.replace(nextIndex, nextIndex-1);
						var elmtVal = $(elmt).val();
						var newElmt = $("<input type='hidden' name='" + elmtName + "' value='" + elmtVal + "'>");
						$("#docElmts").append(newElmt);
						$(elmt).remove();
					}
				}
			}
		}catch(e){
			return false;
		}
	}
	
	$().ready(function() {
		
		//$( "input:submit, input:reset, input:button, input:file, .view, .del").button();
		/*$(".next").click(function(){
			onCityChange();
			$('#iGender').trigger('click');
			
		});*/
		$(".deleteDoc").live("click",del);
		if($('#strCountry').val() != "" && $('#strCountry').val() != null)
		{
			checkCity();
		}
		
		// declare the Tabs
		$tabs = $('#tabs').tabs({ });
		
		$('#tabs').tabs({
			
			select : function(event, ui) {
				
				var selected = $tabs.tabs('option', 'selected'); // => 0
				var clicked = ui.index; // => 0
				
				if( selected > clicked )
					return true;
				
				var isValid = validate();// form validation returning true or false
				return isValid;
			}
			
		});
		
		 var titlesel = $("#strNameTitle option:selected").text();
	     document.getElementById('strTitleDisplay').value = titlesel ;  
	     
	     var visatype = $("#strVisaType option:selected").text();
	     document.getElementById('strVisaTypeDisplay').value = visatype ;
	     
		
	     $('#strNameTitle').change(function() {
		        var nametitlesel = $("#strNameTitle option:selected").text();
		        document.getElementById('strTitleDisplay').value = nametitlesel ;  
		    });
	     
	     $('#iClientRole').change(function() {
	    	 var clientsel = '';
	    	 $("#iClientRole option:selected").each(function(){
	    		 clientsel += $(this).text() + '<BR/>';
	    	 });
		     //var clientsel = $("#iClientRole option:selected").text();
		        document.getElementById('strClientRoleDisplay').value = clientsel ;  
		    });
	    
	     $('#strVisaType').change(function() {
		        var visatypesel = $("#strVisaType option:selected").text();
		        document.getElementById('strVisaTypeDisplay').value = visatypesel ;  
		    });
	     
		
	     $('#strCountry').change(function() {
	        checkCity();
	        var countrysel = $("#strCountry option:selected").text();
	        document.getElementById('strCountryDisplay').value = countrysel ;  
	    });
		    
		if($('#strCountry').val() == "" || $('#strCountry').val() == null){
			//$("#strCountry").val("AE");
   		 	try {
			    $("#strCountry").val("AE");
			  }
			  catch(ex) {
			    //setTimeout("$('" + ctrl + "').val('" + id + "')",1);
			    setTimeout(function(){
				    $("#strCountry").val("AE");
					checkCity();
			        var countrysel = $("#strCountry option:selected").text();
			        document.getElementById('strCountryDisplay').value = countrysel ;
				},1);
			  }
			checkCity();
	        var countrysel = $("#strCountry option:selected").text();
	        document.getElementById('strCountryDisplay').value = countrysel ;
		}		    
	
		
	function checkCity() {
	 
	 $('#strCity >option').remove();
	
	 $.getJSON("nonclient/person/register/city.json",{contryCode:$("#strCountry").val()},
		    	 function(data) {
		    	
		    	$.each(data,function(key,city){ 		    		
		    		<c:choose>
		    			<c:when
		    				test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
		    					var label = city.labelAr;
		    					document.getElementById('strCityDisplay').value = label;
		    			</c:when>
		    			<c:otherwise>
		    					var label =  city.labelEn;
		    					document.getElementById('strCityDisplay').value = label;
		    			</c:otherwise>
		   			</c:choose> 
			    		var id = city.id;
		    			$('<option/>').val(id).html(label).appendTo('#strCity');
					   
					});
		    		
			    	var cityHiddenVal = $("#hiddenCityVal").val();
			    	
			    	if(cityHiddenVal != null && cityHiddenVal != "")
			    	{
			    		//$("#strCity").val(cityHiddenVal);
			    		 try {
		    			    $("#strCity").val(cityHiddenVal);
		    			  }
		    			  catch(ex) {
		    			    //setTimeout("$('" + ctrl + "').val('" + id + "')",1);
		    			    setTimeout(function(){
			    			    $("#strCity").val(cityHiddenVal);
			    			    var cityseltd = $("#strCity option:selected").text();
					        	document.getElementById('strCityDisplay').value = cityseltd ;
		    			    },1);
		    			  }
	    			    var cityseltd = $("#strCity option:selected").text();
			        	document.getElementById('strCityDisplay').value = cityseltd ;
			    	}
		    	
					   
					});
		    
		    	
		  
		    }
	
	
	$('#strCity').change(function() {
		onCityChange();
        /*var newcitysel = $("#strCity option:selected").text();
        document.getElementById('strCityDisplay').value = newcitysel ;*/  
    });
	
	
	$('input[name=iGender]').click(function() {
        var gendersel = $("input[name=iGender]:checked").val();
        if(gendersel==0)
        document.getElementById('strGenderDisplay').value = '<spring:message code="label.nonclient.person.register.male" />' ; 
        else
        document.getElementById('strGenderDisplay').value = '<spring:message code="label.nonclient.person.register.female" />' ;  
    });
	
	
 	$('#strCategory').change(function() {
		
        var category = $("#strCategory option:selected").text();        
        document.getElementById('strClientCategoryDisplay').value = category ;
        
    });
	
	$.validator.addMethod(
	        "regex",
	        function(value, element, regexp) {
	            
	            var re = new RegExp(regexp);
	            return this.optional(element) || re.test(value);
	        },
	        "Please check your input."
	);
	
	$.validator.addMethod(
			"dateRange", 
			function() {
						var issueDate = new Date($("#strPassportDateOfIssue").val());
        				var expiryDate = new Date($("#strPassportExpiryDate").val());
        				var today = new Date();
        				return (issueDate < expiryDate && (expiryDate > today));
    });
		$("#PersonalInfo").validate({

			onfocusout:false,
			onkeyup:false,
			onclick: false,			
			rules : {
				//Step # 1 Rules
				
				strNameTitle : "required",
				strNonClientPersonNameENG : "required",
				strNonClientPersonNameARB : "required",
				iClientRole : "required",
				iGender : "required",
				strDateOfBirth : {				
					required : true,
					date : true
				},
				strCountry : "required",
				strCity : "required",
				strNationality : "required",	
				strEmailAddress : "required",
				
				
				//Step # 2 Rules
				strAddressENG : "required",
				strAddressARB : "required",	
				strMobNo1 : {
					required :true,
					regex: "^(\\+?([0-9-]){6,14}[0-9])?$"
				},
				
				//Step # 3 Rules
				strPassportNo : {
					required: true
				},
				strPassportPlaceOfIssue : {
					required: true
				},
				strPassportDateOfIssue : {
					required : true,
					date: true
				},
				strPassportExpiryDate: {
					required:true,
					date : true,
					dateRange:true
					},
				strVisaExpiryDate : "required"
				
				//Step # 4 Rules
				/*strLeaseCopyURL : "required",
				strContractCopyURL : "required"*/	
			},
			
			showErrors : function(errorMap, errorList) {
				
				var errors = '<ul>';
				var label;				
				if (errorList.length) {
					$.each(errorMap, function(name, value) {
						label = $("label[for='" + name + "']").html();
						label = value + '[' + label + ']';
						errors = errors + '<li>' + label + '</li>';
						

					});
					errors = errors + '</ul>';
					jAlert('error', errors, '<spring:message code="label.errormessage" />');
					return false;
				}
			}		
		});

		
		
		$("#strDateOfBirth,#strPassportDateOfIssue").datepicker({
			changeYear : true,
			changeMonth : true,
			dateFormat : 'dd/mm/yy',
			yearRange : '-50:+0',
			showButtonPanel : true,
			closeText : 'X'
		});

		$("#strPassportExpiryDate,#strVisaExpiryDate").datepicker({
			changeYear : true,
			changeMonth : true,
			dateFormat : 'dd/mm/yy',
			yearRange : '-50:+10',
			showButtonPanel : true,
			closeText : 'X'
		});

		$('#step-1-next-btn').click(function() { // bind click event to link			
			$tabs.tabs('select', 1);
			return false;
		});
		$('#step-2-next-btn').click(function() { // bind click event to link			
			$tabs.tabs('select', 2); 
			return false;
		});
		$('#step-2-prev-btn').click(function() { // bind click event to link
			$tabs.tabs('select', 0); 
			return false;
		});
		
		$('#step-3-next-btn').click(function() { // bind click event to link			
			$tabs.tabs('select', 3); 
			return false;
		});
		$('#step-3-prev-btn').click(function() { // bind click event to link
			$tabs.tabs('select', 1); 
			return false;
		});
		$('#step-4-prev-btn').click(function() { // bind click event to link
			$tabs.tabs('select', 2); 
			return false;
		});
		
		$('#step-4-next-btn').click(function() { // bind click event to link			
			$tabs.tabs('select', 4); 
			return false;
		});
		$('#step-5-prev').click(function() { // bind click event to link
				$tabs.tabs('select',3 ); 
				return false;
		});
		
	});
	
	function validate() {
		var selected = $tabs.tabs('option', 'selected'); 
		if(selected == 0)
		{
			return ($("#PersonalInfo").validate().element("#strNameTitle")
					&& $("#PersonalInfo").validate().element("#strNonClientPersonNameENG")
					&& $("#PersonalInfo").validate().element("#strNonClientPersonNameARB")
					&& $("#PersonalInfo").validate().element("#iClientRole")
					&& $("#PersonalInfo").validate().element("#iGender")
					&& $("#PersonalInfo").validate().element("#strDateOfBirth")
					&& $("#PersonalInfo").validate().element("#strCountry")
					//&& $("#PersonalInfo").validate().element("#strCity")
					&& $("#PersonalInfo").validate().element("#strNationality"));
		}
		if(selected == 1)
		{
			return ($("#PersonalInfo").validate().element("#strAddressENG")
					&& $("#PersonalInfo").validate().element("#strAddressARB")
					&& $("#PersonalInfo").validate().element("#strMobNo1")
					&& $("#PersonalInfo").validate().element("#strEmailAddress"));
		}
	
		if(selected == 2)
		{
			return ($("#PersonalInfo").validate().element("#strPassportNo")
					&& $("#PersonalInfo").validate().element("#strPassportPlaceOfIssue")
					&& $("#PersonalInfo").validate().element("#strPassportDateOfIssue")
					&& $("#PersonalInfo").validate().element("#strPassportExpiryDate")
					&& $("#PersonalInfo").validate().element("#strVisaExpiryDate"));
		}
		if(selected == 3)
		{
			/*return ($("#PersonalInfo").validate().element("#strLeaseCopyURL") 
					&& $("#PersonalInfo").validate().element("#strContractCopyURL"));*/
		}

	}
	

</script>

<div id="tabs">
<ul>
	<li><a href="#step-1"><span><spring:message code="label.nonclient.person.register.personal.information" /></span></a></li>
	<li><a href="#step-2"><span><spring:message code="label.nonclient.person.register.contact.details" /></span></a></li>
	<li><a href="#step-3"><span><spring:message code="label.nonclient.person.register.passport.details" /></span></a></li>
	<li><a href="#step-4"><span><spring:message code="label.nonclient.person.register.upload.documents" /></span></a></li>
	<li><a href="#step-5"><span><spring:message code="label.nonclient.person.register.preview.submit" /></span></a></li>
</ul>

<div id="container" dir='<spring:message code="page.dir"/>'
	align='<spring:message code="page.align"/>'>
	
	<form:form
	name="PersonalInfo" id="PersonalInfo" enctype="multipart/form-data" method="POST"
	modelAttribute="<%=ConstantsAdmin.NON_CLIENT_PERSON_REGISTER_REQUEST_MODEL_KEY %>"
	class="t_form t_fin-black-txt">
	
	<spring:hasBindErrors
		name="<%=ConstantsAdmin.NON_CLIENT_PERSON_REGISTER_REQUEST_MODEL_KEY %>">
		<script type="text/javascript">
	$(document).ready(
			function() {
				jAlert('error', '<li><form:errors path="*" delimiter="<li>"/>',
						'<spring:message code="label.errormessage" />');
			});
</script>
	</spring:hasBindErrors>
	
	
	<div id="step-1">
	<fieldset><legend><spring:message code="label.nonclient.person.register.personal.details" /></legend>
	</fieldset>
	<div class="t_form-left">
	<div class="fm-req"><form:label path="strNameTitle">
	<span class="t_star">*</span>
		<spring:message code="label.nonclient.person.register.title" />
	</form:label> 
			<c:choose>
				<c:when
					test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
					<form:select path="strNameTitle"
						items="${titlesList}"
						id="strNameTitle" itemLabel="labelAr" itemValue="id" class="fm-opt"/>
				</c:when>
				<c:otherwise>
					<form:select path="strNameTitle"
						items="${titlesList}"
						id="strNameTitle" itemLabel="labelEn" itemValue="id"  class="fm-opt"/>
				</c:otherwise>
			</c:choose>
		</div>
	<div class="fm-req"><form:label path="strNonClientPersonNameENG">
	<span class="t_star">*</span>
		<spring:message code="label.nonclient.person.register.nameENG" />
	</form:label> <form:input path="strNonClientPersonNameENG"
		id="strNonClientPersonNameENG" size="20" maxlength="100" /></div>
	<div class="fm-req"><form:label path="strNonClientPersonNameARB">
	<span class="t_star">*</span>
		<spring:message code="label.nonclient.person.register.nameARB" />
	</form:label> <form:input path="strNonClientPersonNameARB"
		id="strNonClientPersonNameARB" size="20" maxlength="100" /></div>
	
	<div class="fm-req"><form:label path="iClientRole">
	<span class="t_star">*</span>
		<spring:message code="label.company.role" />
		<br>
			<span style="font-size: xx-small;font-weight:normal;"><spring:message code="label.company.role.hint" /></span>
	</form:label>
				<c:choose>
					<c:when
						test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
	
							<form:select id="iClientRole" path="iClientRole" multiple="true" cssStyle="height:100px;" class="fm-opt">			   		           
						   		           <form:options items="${nonClientPersonRegistrationRolesList}" itemValue="id" itemLabel="labelAr" delimiter="<br/>" />
						    </form:select>
					</c:when>
					<c:otherwise>
						<form:select id="iClientRole" path="iClientRole" multiple="true" cssStyle="height:100px;" class="fm-opt">			   		           
						   		           <form:options items="${nonClientPersonRegistrationRolesList}" itemValue="id" itemLabel="labelEn" delimiter="<br/>" />
						    </form:select>
					</c:otherwise>
				</c:choose>
			</div>
			
			<br><br>
	
	<div class="fm-req">
		<form:label path="strCategory">
		<span class="t_star">*</span>
			<spring:message code="label.client.category" />
		</form:label> 
		<c:choose>
			<c:when
				test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
				<form:select path="strCategory"
					items="${clientCategoryList}"
					id="strCategory" itemLabel="labelAr" itemValue="id"
					class="fm-opt"/>
			</c:when>
			<c:otherwise>
				<form:select path="strCategory"
					items="${clientCategoryList}"
					id="strCategory" itemLabel="labelEn" itemValue="id"
					class="fm-opt"/>
			</c:otherwise>
		</c:choose>
	</div>	
	<div class="fm-req"><form:label path="iGender">
	<span class="t_star">*</span>
		<spring:message code="label.nonclient.person.register.gender" />
	</form:label>
	<div class="fm-multi"><spring:message code="label.nonclient.person.register.male" /><form:radiobutton path="iGender"
		value="0" id="iGender" cssClass="opt-input"/> <spring:message code="label.nonclient.person.register.female" /><form:radiobutton path="iGender"
		value="1" id="iGender" cssClass="opt-input"/></div>
	</div>
	<div class="fm-req"><form:label path="strDateOfBirth">
	<span class="t_star">*</span>
		<spring:message code="label.nonclient.person.register.dateOfBirth" />
	</form:label> <span id="dateInput"><form:input path="strDateOfBirth"
		id="strDateOfBirth" size="20" maxlength="100" /></span></div>
		
		<div class="fm-req">			
	    <form:label path="strCountry" >
	    <span class="t_star">*</span>
		   <spring:message code="label.nonclient.person.register.country" />
		</form:label>
		<c:choose>
			<c:when
				test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
				<form:select path="strCountry"
					items="${countryList}"
					id="strCountry" itemLabel="labelAr" itemValue="id" class="fm-opt"/>
			</c:when>
			<c:otherwise>
				<form:select path="strCountry"
					items="${countryList}"
					id="strCountry" itemLabel="labelEn" itemValue="id" class="fm-opt"/>
			</c:otherwise>
		</c:choose>
	</div>	
				
	<div class="fm-req">	
	    <form:label path="strCity" >
	    <span class="t_star">*</span>
		   <spring:message code="label.nonclient.person.register.city" />
		</form:label>
		<c:choose>
			<c:when
				test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
				<form:select path="strCity"
					items="${cityList}" onchange="onCityChange()"
					id="strCity" itemLabel="labelAr" itemValue="id" class="fm-opt"/>
			</c:when>
			<c:otherwise>
				<form:select path="strCity"
					items="${cityList}" onchange="onCityChange()"
					id="strCity" itemLabel="labelEn" itemValue="id" class="fm-opt"/>
			</c:otherwise>
		</c:choose>					
	</div>	
	
	<div class="fm-req">	
	    <form:label path="strNationality" >
	    <span class="t_star">*</span>
		   <spring:message code="label.nonclient.person.register.nationality" />
		</form:label>
		<c:choose>
			<c:when
				test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
				<form:select path="strNationality"
					items="${nationalityList}"
					id="strNationality" itemLabel="labelAr" itemValue="labelAr" class="fm-opt"/>
			</c:when>
			<c:otherwise>
				<form:select path="strNationality"
					items="${nationalityList}"
					id="strNationality" itemLabel="labelEn" itemValue="labelEn" class="fm-opt"/>
			</c:otherwise>
		</c:choose>					
	</div>	
	
	</div>
	<div id="fm-submit" class="fm-req">
		<input type="button" name="step-1-next-btn" value="<spring:message code="label.button.next" />" id="step-1-next-btn" class="t_btns next"/>	
		<input type="reset"	name="reset" value="<spring:message code="label.button.reset" />" class="t_btns reset"/> 
	</div>
	
	</div>
	
	
	<div id="step-2">
		<fieldset>
			<legend><spring:message code="label.nonclient.person.register.contact.details" /></legend>
			</fieldset>
			<div class="t_form-left">
			<div class="fm-req">
				<form:label path="strAddressENG">
				<span class="t_star">*</span>				
					<spring:message code="label.nonclient.person.register.addressENG" />
				</form:label>	
				<form:textarea path="strAddressENG" id="strAddressENG"
							size="20" maxlength="100" style="width:190px;height:100px;" class="fm-opt"/>							
			</div>
			<div class="fm-req">
				<form:label path="strAddressARB">
				<span class="t_star">*</span>
					<spring:message code="label.nonclient.person.register.addressARB" />
				</form:label>	
				<form:textarea path="strAddressARB" id="strAddressARB"
							size="20" maxlength="100" style="width:190px;height:100px;" class="fm-opt"/>			
			</div>
			<div>
				<form:label path="strPOBox"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.poBox" /></form:label>
				<form:input path="strPOBox" id="strPOBox"
						size="20" maxlength="100" />				
			</div>
			<div>
				<form:label path="strPOBoxLocation"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.poBoxLocation" /></form:label>
				<form:input path="strPOBoxLocation" id="strPOBoxLocation"
						size="20" maxlength="100" />				  
			</div>
			<div>
				<form:label path="strTelNoHome"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.telNoOffice" /></form:label>
				<form:input path="strTelNoHome" id="strTelNoHome"
						size="20" maxlength="100" />				
			</div>
			<div>
				<form:label path="strTelNoOffice"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.telNoHome" /></form:label>
				<form:input path="strTelNoOffice" id="strTelNoOffice"
						size="20" maxlength="100" />				
			</div>
			<div class="fm-req">
				<form:label path="strMobNo1"><span class="t_star">*</span><spring:message code="label.nonclient.person.register.mobNo1" /></form:label>
				<form:input path="strMobNo1" id="strMobNo1"
						size="20" maxlength="100" />				
			</div>
			<div>
				<form:label path="strMobNo2"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.mobNo2" /></form:label>
				<form:input path="strMobNo2" id="strMobNo2"
						size="20" maxlength="100" />								
			</div>
			<div>
				<form:label path="strFaxNo"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.faxNo" /></form:label>
				<form:input path="strFaxNo" id="strFaxNo"
						size="20" maxlength="100" />				
			</div>
			<div>
				<form:label path="strWebsiteURL"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.websiteURL" /></form:label>
				<form:input path="strWebsiteURL" id="strWebsiteURL"
						size="20" maxlength="100" />							
			</div>						
			<div class="fm-req">
				<form:label path="strEmailAddress"><span class="t_star">*</span><spring:message code="label.nonclient.person.register.emailAddress" /></form:label>
				<form:input path="strEmailAddress" id="strEmailAddress"
						size="20" maxlength="100" />								
			</div>

		</div>	
			<div id="fm-submit" class="fm-req">
		<input
		type="button" name="step-2-next-btn" id="step-2-next-btn" value="<spring:message code="label.button.next" />"  class="t_btns next"/>
		<input type="button"
		name="step-2-prev-btn" id="step-2-prev-btn" value="<spring:message code="label.button.previous" />" class="t_btns previous"/>
		<input type="reset"
		name="reset" value="<spring:message code="label.button.reset" />" class="t_btns reset"/>
		 
	</div>		
</div>

<div id="step-3">
<fieldset>
			<legend><spring:message code="label.nonclient.person.register.passport.details" /></legend>
			</fieldset>
			<div class="t_form-left">
			<div>
				<form:label path="strPassportNo"><span class="t_star">*</span><spring:message code="label.nonclient.person.register.passportNo" /></form:label>
				<form:input path="strPassportNo" id="strPassportNo"
						size="20" maxlength="100" />									
			</div>
			<div>
				<form:label path="strPassportPlaceOfIssue"><span class="t_star">*</span><spring:message code="label.nonclient.person.register.passportPlaceOfIssue" /></form:label>
				<form:input path="strPassportPlaceOfIssue" id="strPassportPlaceOfIssue"
						size="20" maxlength="100" />				
			</div>
			<div class="fm-req">
				<form:label path="strPassportDateOfIssue"><span class="t_star">*</span><spring:message code="label.nonclient.person.register.passprtDateOfIssue" /></form:label>
				<span id="dateInput"><form:input path="strPassportDateOfIssue" id="strPassportDateOfIssue"
						size="20" maxlength="100" />
				</span>					
			</div>
			<div class="fm-req">
				<form:label path="strPassportExpiryDate"><span class="t_star">*</span><spring:message code="label.nonclient.person.register.passportExpiryDate" /></form:label>
				<span id="dateInput">
					<form:input path="strPassportExpiryDate" id="strPassportExpiryDate"
						size="20" maxlength="100" />
				</span>					  
			</div>
			<div>
				<form:label path="strEmiratesID"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.emiratesID" /></form:label>
				<form:input path="strEmiratesID" id="strEmiratesID"
						size="20" maxlength="100" />				
			</div>
			<div>
				<form:label path="strEbdara"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.ebdara" /></form:label>
				<form:input path="strEbdara" id="strEbdara"
						size="20" maxlength="100" />			
			</div>
			<div>
				<form:label path="strVisaNo"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.visaNo" /></form:label>
				<form:input path="strVisaNo" id="strVisaNo"
						size="20" maxlength="100" />				
			</div>
			<div>
				<form:label path="strVisaType"><span class="t_star">&nbsp;</span><spring:message code="label.nonclient.person.register.visaType" /></form:label>				
				<c:choose>
					<c:when
						test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
						<form:select path="strVisaType"
							items="${nonClientPersonRegisterVisaTypeList}"
							id="strVisaType" itemLabel="labelAr" itemValue="id" class="fm-opt"/>
					</c:when>
					<c:otherwise>
						<form:select path="strVisaType"
							items="${nonClientPersonRegisterVisaTypeList}"
							id="strVisaType" itemLabel="labelEn" itemValue="id" class="fm-opt"/>
					</c:otherwise>
				</c:choose>								
			</div>
			<div class="fm-req">
				<form:label path="strVisaExpiryDate"><span class="t_star">*</span><spring:message code="label.nonclient.person.register.visaExpiryDate" /></form:label>
				<span id="dateInput">
					<form:input path="strVisaExpiryDate" id="strVisaExpiryDate"
						size="20" maxlength="100" />
				</span>								
			</div>
			<div>
				<form:label path="strRemarks"><spring:message code="label.nonclient.person.register.remarks" /></form:label>
				<form:input path="strRemarks" id="strRemarks"
						size="20" maxlength="100" />					
			</div>	
			

		</div>	
				<div id="fm-submit" class="fm-req">
		<input
		type="button" name="step-3-next-btn" id="step-3-next-btn" value="<spring:message code="label.button.next" />" class="t_btns next"/>
		<input type="button"
		name="step-3-prev-btn" id="step-3-prev-btn" value="<spring:message code="label.button.previous" />" class="t_btns previous"/> 
		</div>


</div>			


<div id="step-4">
	<fieldset>
	
		<%
				if((request.getAttribute(ConstantsAdmin.SUCCESS_PARAM) != null) || (request.getAttribute(ConstantsAdmin.ERROR_PARAM) != null)) {
				if(request.getAttribute(ConstantsAdmin.SUCCESS_PARAM) != null){
			%>
	<h4><%
		String  doc =(String)request.getAttribute(ConstantsAdmin.SUCCESS_PARAM);
		if(doc.equals("LEASE_COPY")){
	%>
				<spring:message code="label.person.leasecopy" />
				<%
			}else if(doc.equals("CNRCT_COPY")){
			%>
				<spring:message code="label.person.contractcopy" />
			<%	
			}
		%>
		<spring:message code="succss.document.upload" />
		</h4> <%}%>
	<script type="text/javascript">
		  				$().ready(function() {
		  					var $tabs = $("#tabs").tabs();
		  					$tabs.tabs('select', 3);
		  				});
		  				</script> <% } %>
			<legend><spring:message code="label.nonclient.person.register.upload.documents" /></legend></fieldset>	   
		   <br>
<div>
		    	
           <div class="fm-gen" >
					
					<br/>
				    <form:label path="strUploadDocumentType"  cssStyle="width:300px;"><span class="t_star">&nbsp;</span>
					   <spring:message code="label.company.uploaddocumentstype" />
					</form:label>
					<c:choose>
						<c:when
							test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
							<form:select path="strUploadDocumentType"
								items="${nonClientRegistrationUploadDocumentType}"
								id="strUploadDocumentType" itemLabel="labelAr" itemValue="id" cssStyle="width:200px;" class="fm-opt float"/>
						</c:when>
						<c:otherwise>
							<form:select path="strUploadDocumentType"
								items="${nonClientRegistrationUploadDocumentType}"
								id="strUploadDocumentType" itemLabel="labelEn" itemValue="id" cssStyle="width:200px;" class="fm-opt float"/>
						</c:otherwise>
					</c:choose>
				
				</div>	
		
		
			<div style="clear:both"></div>
			<div class="fm-req">
			<div class="t_form-left"><input type="file" id="files[0]"
		name="files[0]" size="25" style="width:250px;"/>
		<input type="submit" class="submit" name="Upload" value="<spring:message code="label.button.upload" />"  /> </div>
		
		</div>	
				<br>
				<div style="clear:both"></div>	
					<div id="fm-submit" class="fm-req">
			<input type="submit" name="next" value="<spring:message code="label.button.next" />" class="t_btns next"/>
			<input type="button"
				name="step-4-prev-btn" id="step-4-prev-btn" value="<spring:message code="label.button.previous" />" class="t_btns previous"/> 
			   </div>	
		
			<div style="clear:both"></div>	
			<form:hidden path="hiddenCityVal" id="hiddenCityVal" />
			
			<form:hidden path="strClientCategoryDisplay" id="strClientCategoryDisplay" />
						
			<form:hidden path="strLeaseCopyURL" id="strLeaseCopyURL" />
			
			<form:hidden path="strContractCopyURL" id="strContractCopyURL" />
			
			<form:hidden path="strLeaseCopyName" id="strLeaseCopyName"  />
			
			<form:hidden path="strContractCopyName" id="strContractCopyName"  />
			
			<form:hidden path="strClientRoleDisplay" id="strClientRoleDisplay" />
	        
			<form:hidden path="strCityDisplay" id="strCityDisplay" />
			
			<form:hidden path="strCountryDisplay" id="strCountryDisplay" />
			
			<form:hidden path="strGenderDisplay" id="strGenderDisplay" />
			
			<form:hidden path="strTitleDisplay" id="strTitleDisplay" />
			
			<form:hidden path="strVisaTypeDisplay" id="strVisaTypeDisplay" />
			
             <br><br><br>
             	

			
			<table border="0" id="docTable">
		
			<c:forEach items="${nonClientPersonRegisterPersonalInfo.arrDocumentVOs}" var="mapping" varStatus="loop">
				<tr>
				 <c:choose>
	          <c:when test="${mapping.strUploadDocumentType == 'LEASE_COPY'}">
	           <td><spring:message code="label.person.leasecopy" /></td><td width="10px"></td><td><a href="file/tempview.htm?tempFileName=${mapping.strTempFileName}" class="view"><spring:message code="label.user.request.view" /></a></td>
				<td>
				<a
					href="#" class="deleteDoc"><spring:message
							code="label.button.delete" />
				</a>
				</td>
	          </c:when>
	          <c:otherwise>
	            <td><spring:message code="label.person.contractcopy" /></td><td width="10px"></td><td><a href="file/tempview.htm?tempFileName=${mapping.strTempFileName}" class="view"><spring:message code="label.user.request.view" /></a></td>
				<td>
				<a
					href="#" class="deleteDoc"><spring:message
							code="label.button.delete" />
				</a>
				</td>
	            <br><br>
	          </c:otherwise>
	          </c:choose>   
	          </tr>
	         	</c:forEach>
         
        	</table>
			
			

		
		
		</div>
	
	   
			<% if(request.getAttribute("uploadnext") != null){	%>
	<script type="text/javascript">
		  				$().ready(function() {
		  					var $tabs = $("#tabs").tabs();
		  					$tabs.tabs('select', 3);
		  				});
		  				</script> <% } %>	   	
</div>	
<div id="step-5">
	<fieldset>
	
	<% if(request.getAttribute("preview") != null){	%>
	<script type="text/javascript">
		  				$().ready(function() {
		  					var $tabs = $("#tabs").tabs();
		  					$tabs.tabs('select', 4);
		  				});
		  				</script> <% } %>
		
			<legend><spring:message code="label.nonclient.person.register.personal.details" /></legend></fieldset>
			<div class="t_form-left" style="width: 500px;">
			<div class="fm-req">
				<form:label path="strTitleDisplay">
					<spring:message code="label.nonclient.person.register.title" />
				</form:label>
				 <c:out value="${nonClientPersonRegisterPersonalInfo.strTitleDisplay}"></c:out>
				
				<br />					
			</div>
			<div style="clear: both"></div>
			<div class="fm-req"><form:label path="strNonClientPersonNameENG">
				<spring:message code="label.nonclient.person.register.nameENG" />
				</form:label> <c:out value="${nonClientPersonRegisterPersonalInfo.strNonClientPersonNameENG}" />
				<br />
			</div>
			<div style="clear: both"></div>
			<div class="fm-req"><form:label path="strNonClientPersonNameARB">
				<spring:message code="label.nonclient.person.register.nameARB" />
				</form:label> <c:out value="${nonClientPersonRegisterPersonalInfo.strNonClientPersonNameARB}" />
				<br />
			</div>
			<div style="clear: both"></div>
			<div class="fm-req"><form:label path="strClientRoleDisplay">
			<spring:message code="label.company.role" /></form:label>
			<div class="float"><c:out value="${nonClientPersonRegisterPersonalInfo.strClientRoleDisplay}" escapeXml="false"/></div>
			<br />
			</div>
			<div style="clear: both"></div>
			<div class="fm-req">
				<form:label path="strCategory"><spring:message code="label.client.category" /></form:label>
			<c:out
				value="${nonClientPersonRegisterPersonalInfo.strClientCategoryDisplay}" />
			<br />
			</div>
			<br/>
			<div style="clear: both"></div>
			<div class="fm-req" >
				<form:label path="strGenderDisplay">
				<spring:message code="label.nonclient.person.register.gender" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strGenderDisplay}" />
				<br />				
			</div>
			<div style="clear: both"></div>
			<div class="fm-req">
				<form:label path="strDateOfBirth"><spring:message code="label.nonclient.person.register.dateOfBirth" /></form:label>
				<fmt:formatDate pattern="dd-MM-yyyy" value="${nonClientPersonRegisterPersonalInfo.strDateOfBirth}" var="newdatevardob"/>
				<c:out value="${newdatevardob}" />
				<br />				
			</div>
			<div style="clear: both"></div>
			<div class="fm-req">
				<form:label path="strCityDisplay"><spring:message code="label.nonclient.person.register.city" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strCityDisplay}" />
				<br />				
			</div>
			<div style="clear: both"></div>
			<div class="fm-req">
				<form:label path="strCountryDisplay"><spring:message code="label.nonclient.person.register.country" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strCountryDisplay}" />
				<br />				
			</div>
			<div style="clear: both"></div>
			<div class="fm-req">
				<form:label path="strNationality"><spring:message code="label.nonclient.person.register.nationality" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strNationality}" />
				<br />							
			</div>
			<div style="clear: both"></div>
			</div>
			<fieldset>
			<legend><spring:message code="label.nonclient.person.register.contact.details" /></legend>
			</fieldset>
			<div class="t_form-left">
			<div class="fm-req">
				<form:label path="strAddressENG">
					<spring:message code="label.nonclient.person.register.addressENG" />
				</form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strAddressENG}" />
				<br/>								
			</div>
			<div style="clear: both"></div>
			<div class="fm-req">
				<form:label path="strAddressARB">
					<spring:message code="label.nonclient.person.register.addressARB" />
				</form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strAddressARB}" />
				<br/>
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strPOBox"><spring:message code="label.nonclient.person.register.poBox" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strPOBox}" />
				<br/>				
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strPOBoxLocation"><spring:message code="label.nonclient.person.register.poBoxLocation" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strPOBoxLocation}" />
				<br/>				  
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strTelNoHome"><spring:message code="label.nonclient.person.register.telNoHome" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strTelNoHome}" />
				<br/>				
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strTelNoOffice"><spring:message code="label.nonclient.person.register.telNoOffice" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strTelNoOffice}" />
				<br/>				
			</div>
			<div style="clear: both"></div>
			<div class="fm-req">
				<form:label path="strMobNo1"><spring:message code="label.nonclient.person.register.mobNo1" /></form:label>
				<span><c:out value="${nonClientPersonRegisterPersonalInfo.strMobNo1}" /></span>
				<br/>	
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strMobNo2"><spring:message code="label.nonclient.person.register.mobNo2" /></form:label>
				<span><c:out value="${nonClientPersonRegisterPersonalInfo.strMobNo2}" /></span>
				<br/>								
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strFaxNo"><spring:message code="label.nonclient.person.register.faxNo" /></form:label>
				<span><c:out value="${nonClientPersonRegisterPersonalInfo.strFaxNo}" /></span>
				<br/>				
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strWebsiteURL"><spring:message code="label.nonclient.person.register.websiteURL" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strWebsiteURL}" />
				<br/>							
			</div>			
			<div style="clear: both"></div>			
			<div class="fm-req">
				<form:label path="strEmailAddress"><spring:message code="label.nonclient.person.register.emailAddress" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strEmailAddress}" />								
			</div>
			<div style="clear: both"></div>
		</div>
		<fieldset>
			<legend><spring:message code="label.nonclient.person.register.passport.details" /></legend>
			</fieldset>
			<div class="t_form-left">
			<div>
				<form:label path="strPassportNo">
					<spring:message code="label.nonclient.person.register.passportNo" />
				</form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strPassportNo}" />
				<br/>							
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strPassportPlaceOfIssue">
					<spring:message code="label.nonclient.person.register.passportPlaceOfIssue" />
				</form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strPassportPlaceOfIssue}" />							
				<br/>
			</div>
			<div style="clear: both"></div>
			<div class="fm-req">
				<form:label path="strPassportDateOfIssue"><spring:message code="label.nonclient.person.register.passprtDateOfIssue" /></form:label>
				<fmt:formatDate pattern="dd-MM-yyyy" value="${nonClientPersonRegisterPersonalInfo.strPassportDateOfIssue}" var="newdatevardoi"/>
				<c:out value="${newdatevardoi}" />					
				<br/>
			</div>
			<div style="clear: both"></div>
			<div class="fm-req">
				<form:label path="strPassportExpiryDate"><spring:message code="label.nonclient.person.register.passportExpiryDate" /></form:label>
				<fmt:formatDate pattern="dd-MM-yyyy" value="${nonClientPersonRegisterPersonalInfo.strPassportExpiryDate}" var="newdatevarped"/>
				<c:out value="${newdatevarped}" />				  
				<br/>
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strEmiratesID"><spring:message code="label.nonclient.person.register.emiratesID" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strEmiratesID}" />					
				<br/>
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strEbdara"><spring:message code="label.nonclient.person.register.ebdara" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strEbdara}" />				
				<br/>
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strVisaNo"><spring:message code="label.nonclient.person.register.visaNo" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strVisaNo}" />				
				<br/>
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strVisaTypeDisplay"><spring:message code="label.nonclient.person.register.visaType" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strVisaTypeDisplay}" />										
				<br/>
			</div>
			<div style="clear: both"></div>
			<div class="fm-req">
				<form:label path="strVisaExpiryDate"><spring:message code="label.nonclient.person.register.visaExpiryDate" /></form:label>
				<fmt:formatDate pattern="dd-MM-yyyy" value="${nonClientPersonRegisterPersonalInfo.strVisaExpiryDate}" var="newdatevarved"/>
				<c:out value="${newdatevarved}" />	
													
				<br/>
			</div>
			<div style="clear: both"></div>
			<div>
				<form:label path="strRemarks"><spring:message code="label.nonclient.person.register.remarks" /></form:label>
				<c:out value="${nonClientPersonRegisterPersonalInfo.strRemarks}" />									
				<br/>			
			</div>
			<div style="clear: both"></div>
			</div>	
				
			<fieldset>
			<legend><spring:message code="label.nonclient.person.register.documents.details" /></legend>
			</fieldset>
			<div class="t_form-left">
			<div class="fm-req">
			<div style="clear: both"></div>
		
		<table border="0">
		
			<c:forEach items="${nonClientPersonRegisterPersonalInfo.arrDocumentVOs}" var="mapping" varStatus="loop">
			<tr>
			 <c:choose>
          <c:when test="${mapping.strUploadDocumentType == 'LEASE_COPY'}">
           <td><spring:message code="label.person.leasecopy" /></td><td width="10px"></td><td><a href="file/tempview.htm?tempFileName=${mapping.strTempFileName}" class="view"><spring:message code="label.user.request.view" /></a></td>
          </c:when>
          <c:otherwise>
            <td><spring:message code="label.person.contractcopy" /></td><td width="10px"></td><td><a href="file/tempview.htm?tempFileName=${mapping.strTempFileName}" class="view"><spring:message code="label.user.request.view" /></a></td><br><br>
          </c:otherwise>
          </c:choose>   
          </tr>
         	</c:forEach>
         
        </table>
        
			</div>
	
		</div>	
		<div id="fm-submit" class="fm-req">
			<input type="submit" name="submit" value="<spring:message code="label.button.submit" />"  class="t_btns submit"/>
			<input type="button" name="step-5-prev" id="step-5-prev" value="<spring:message code="label.button.previous" />" class="t_btns previous"/> 
		</div>	
		<span id="docElmts">	
		<c:forEach items="${nonClientPersonRegisterPersonalInfo.arrDocumentVOs}" var="mapping" varStatus="loop">
               <form:hidden path="arrDocumentVOs[${loop.index}].strName" value="${arrDocumentVOs.strName}"/>
               <form:hidden path="arrDocumentVOs[${loop.index}].URL" value="${arrDocumentVOs.URL}"/>
               <form:hidden path="arrDocumentVOs[${loop.index}].strUploadDocumentType" value="${arrDocumentVOs.strUploadDocumentType}"/>
               <form:hidden path="arrDocumentVOs[${loop.index}].strTempFileName" value="${arrDocumentVOs.strTempFileName}"/>
               <form:hidden path="arrDocumentVOs[${loop.index}].strExtension" value="${arrDocumentVOs.strExtension}"/>
       	</c:forEach>
       	</span>
</div>		
</form:form>
</div>
</div>
